<template>
    <div class="video-grid">
        <VideoPlayer :videoSrc="videoSrc1" :playerId="1" />
        <VideoPlayer :videoSrc="videoSrc2" :playerId="2" />
        <VideoPlayer :videoSrc="videoSrc3" :playerId="3" />
        <VideoPlayer :videoSrc="videoSrc4" :playerId="4" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import VideoPlayer from '../../components/VideoPlayer.vue';

const videoSrc1 = ref('http://127.0.0.1:8010/video/1');
const videoSrc2 = ref('http://127.0.0.1:8010/video/2');
const videoSrc3 = ref('http://127.0.0.1:8010/video/3');
const videoSrc4 = ref('http://127.0.0.1:8010/video/4');
</script>

<style>
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 350px);
    gap: 10px;
    height: 200vh;
    padding: 10px;
    box-sizing: border-box;
}

.video-grid>* {
    width: 100%;
    height: 100%;
}
</style>
